<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-select v-model="selectOptions.query" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-form-item>
          <el-input :placeholder="selectOptions.query" v-model="selectOptions.keywords" @keyup.enter.native="doSearch"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="doSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="background: #13ce66" v-on:click="_reload">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table ref="multipleTable" :data="seeds" v-loading="loading" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" element-loading-text="玩命请求中。。。">
      <el-table-column label="ID" width="80" prop="id">
      </el-table-column>
      <el-table-column label="名称" width="180" prop="title">
      </el-table-column>
      <el-table-column label="卡状态" width="120" prop="card_status" :formatter="cardStatus">
      </el-table-column>
      <el-table-column label="用户名" prop="nickname" width="120">
      </el-table-column>
      <el-table-column label="总次数" prop="number" width="80">
      </el-table-column>
      <el-table-column label="已配送次数" prop="shipping_number" width="80">
      </el-table-column>
      <el-table-column label="周期" prop="shipping_week" width="80">
      </el-table-column>
      <el-table-column label="收获地址" prop="address" min-width="80" :formatter="addressList">
      </el-table-column>
      <el-table-column label="创建日期" prop="create_time" width="180">
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;" :current-page="parseInt(selectOptions.page)">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{total}} 条数据</span>
    </el-col>

  </section>
</template>
<script type="text/ecmascript-6">
  import util from '../../util'
  import NProgress from 'nprogress'
  import {isUrlHasPurview} from '../../vuex/getters'
  import { apiTree } from '../../apiTree'

  export default {
    name: 'cardAddress',
    // 局部注册组件
    components: {

    },
    data() {
      return {
        options: [
          {value: 'ID', label: 'ID'},
          {value: 'phone', label: '手机号'},
          {value: 'nickname', label: '用户名'},
        ],
        multipleSelection: '',
        total: 0,
        seeds: [],
        selectOptions: {
          query: this.$route.query.query !== undefined ? this.$route.query.query : '',
          keywords: this.$route.query.keywords !== undefined ? this.$route.query.keywords : '',
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1,
        }
      }
    },
    methods: {
      cardStatus(row) {
        if (row.card_status == '1') {
            return '正常';
        } else if (row.card_status == '2') {
          return '用尽'
        } else {
          return '锁定';
        }
      },
      addressList(row) {
        let address = JSON.parse(row.address);
        let detail = address.province + address.city + address.district + address.edit + address.name;
        if (address.sex == 1) {
          detail += "先生";
        } else {
          detail += "女士";
        }
        detail += address.phone;
        return detail;
      },
      currentPageChange(val) {
        this.selectOptions.page = val
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      doSearch() {
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      // 选中列
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 获得种子列表
      getMess() {
        let para = this.$route.query
        if (util.isEmptyObject(para)) {
          this.selectOptions = {
            page: 1,
            query: '',
            keywords: ''
          }
        }
        this.loading = true
        NProgress.start()
        apiTree('cardsAddress/index', 'order/cardsAddress', para).then((res) => {
          if (res.s === 1) {
            this.total = res.d.total_num
            this.seeds = res.d.data
            this.loading = false
            NProgress.done()
          }
        })
      },
      // 刷新列表
      _reload() {
        this.getMess();
      },
    },
    created() {
      this.getMess();
      this.$on('getMess', () => {
        this.getMess();
      })
    },
    watch: {
      $route: 'getMess'
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .p-pic-old
    display inline-block
    width 500px
  .pl-pic-upload
    display inline-block
    margin-left 10px
    position relative
  .p-pic-edit
    left: 175px;
    top: -44px;
    .upload_plant_pic
      display block
      width 80px
      height 35px
      cursor pointer
      position absolute
      top 0px
      right 20px
      opacity 0
      & input[type=file]
        display block
        cursor pointer
        width 80px
        height 35px
  .p-pl-poster
    width 160px
    height 80px
    margin-bottom 20px
    margin-top 0px
    & img
      width 100%
      height 100%
  .el-form-item
    margin-bottom 10px
</style>
